/*
 * @Author: hongbin
 * @Date: 2023-03-29 10:37:02
 * @LastEditors: hongbin
 * @LastEditTime: 2023-03-30 17:01:04
 * @Description:
 */
import { ParticleEffect } from "@/components/particleEffect/ParticleEffect";
import Layout from "@/components/Three/Layout";

import { ThreeHelper } from "@/ThreeHelper";
import { FC } from "react";
import * as THREE from "three";

interface IProps {}

const Index: FC<IProps> = () => {
    return (
        <>
            <Layout
                seoTitle="粒子效果"
                title={"自定义shader - 粒子效果"}
                init={init}
                desc={"向下滚动查看效果"}
                destroy={destroy}
            />
        </>
    );
};

export default Index;

const destroyEvent = [] as Array<VoidFunction>;

function destroy() {
    destroyEvent.forEach((f) => f());
}

async function init(helper: ThreeHelper) {
    // helper.addAxis();
    helper.addStats();
    helper.camera.position.set(0, 0, 50);
    helper.frameByFrame();
    helper.addGUI();
    helper.initLights();

    // 避免轨道控制器影响
    // const mask = document.createElement("div") as HTMLDivElement;
    // mask.style["width"] = "100vw";
    // mask.style["height"] = "100vh";
    // mask.style["position"] = "fixed";
    // mask.style["top"] = "0px";
    // mask.style["left"] = "0px";
    // mask.style["zIndex"] = "2";
    // document.body.appendChild(mask);

    const particleEffect = new ParticleEffect(100000);

    helper.add(particleEffect.particle);

    const gltf = await helper.loadGltf("/models/particle.glb");

    const Wall = gltf.scene.getObjectByName("Wall") as Mesh;
    const people = gltf.scene.getObjectByName("people") as Mesh;
    const Worm_Gear = gltf.scene.getObjectByName("Worm_Gear") as Mesh;
    const HoneyComb = gltf.scene.getObjectByName("HoneyComb") as Mesh;

    if (!Wall || !people || !Worm_Gear || !HoneyComb) {
        throw new Error("模型获取有误");
    }

    const list = [
        {
            geometry: HoneyComb.geometry.scale(4, 4, 4),
            color: [new THREE.Color("#55ff00"), new THREE.Color("#0095ff")],
        },
        {
            geometry: Wall.geometry.scale(4, 4, 4).translate(0, -20, 0),
            color: [new THREE.Color("#55ff00"), new THREE.Color("#0095ff")],
        },
        {
            geometry: people.geometry
                .scale(2, 2, 2)
                .rotateX(0.12)
                .rotateY(0.82),
            color: [new THREE.Color("#7e04a7"), new THREE.Color("#00bbff")],
        },
        {
            geometry: Worm_Gear.geometry.scale(3, 3, 3),
            color: [new THREE.Color("#55ff00"), new THREE.Color("#0095ff")],
        },
    ];

    document.body.style.height = innerHeight * (list.length + 1) - 1 + "px";

    let curr = 0;
    // particleEffect.to(list[0].geometry, list[0].color);
    // particleEffect.setProgress(1);

    list[-1] = {
        geometry: new THREE.BufferGeometry().setAttribute(
            "position",
            new THREE.BufferAttribute(particleEffect.initToPosition, 3)
        ),
        color: [new THREE.Color("#fcfcfc"), new THREE.Color("#f7fcff")],
    };
    particleEffect.translate(list[-1], list[0]);

    const onScroll = () => {
        const currScrollHeight = window.scrollY;
        const percent = currScrollHeight / innerHeight;
        const currIndex = Math.floor(percent);

        if (currIndex != curr) {
            if (curr < currIndex) {
                particleEffect.translate(list[curr], list[currIndex]);
                // particleEffect.to(
                //     list[currIndex].geometry,
                //     list[currIndex].color
                // );
            } else {
                particleEffect.translate(list[currIndex - 1], list[curr - 1]);
            }
            curr = currIndex;
        }

        particleEffect.setProgress(percent - currIndex);
    };

    document.addEventListener("scroll", onScroll);

    destroyEvent.push(() => {
        document.removeEventListener("scroll", onScroll);
        window.scrollTo({ left: 0, top: 0 });
    });
}
